<template>
  <a-list
    item-layout="vertical"
    :grid="{ gutter: 16, md: 4 }"
    size="large"
    :pagination="pagination"
    :data-source="listData"
  >
    <a-list-item slot="renderItem" key="item.title" slot-scope="item">
      <a-card hoverable style="width: 240px">
        <img
          slot="cover"
          alt="example"
          src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
        />
        <a-card-meta :title="item.title">
          <template slot="description">
            {{ item.description }}
          </template>
        </a-card-meta>
      </a-card>
    </a-list-item>
  </a-list>
</template>
<script>
const listData = [];
for (let i = 0; i < 23; i++) {
  listData.push({
    href: "https://www.antdv.com/",
    title: `ant design vue part ${i}`,
    description:
      "Ant Design, a design language for background applications, is refined by Ant UED Team."
  });
}

export default {
  data() {
    return {
      listData,
      pagination: {
        pageSize: 8
      }
    };
  }
};
</script>
<style></style>
